import { defineStore } from 'pinia'
import { setSvgColor } from '@/utils/svg'
import { ref } from 'vue'
// 用户模块
export const usePageColorStore = defineStore(
  'zlcode-page-color',
  () => {
    const isDark = ref(false) // false 表示白天模式
    const isFirstUse = ref(true) // 是否是第一次使用
    const change = () => {
      // 如果当前是白天，那么就切换成黑色
      if (isDark.value === false) {
        isDark.value = true
        document.documentElement.classList.add('dark')
        document.documentElement.classList.remove('light')
        document.body.setAttribute('arco-theme', 'dark') // 字节切换深色模式
      } else {
        // 当前是黑夜，切换成白天
        isDark.value = false
        document.documentElement.classList.remove('dark')
        document.documentElement.classList.add('light')
        document.body.removeAttribute('arco-theme') // 字节切换深色模式
      }
      setSvgColor() // 更改所有的 svg 组件颜色
    }
    const set = (color) => {
      if (color === 'dark') {
        isDark.value = true
        document.documentElement.classList.add('dark')
        document.documentElement.classList.remove('light')
        document.body.setAttribute('arco-theme', 'dark') // 字节切换深色模式
      } else if (color === 'light') {
        isDark.value = false
        document.documentElement.classList.remove('dark')
        document.documentElement.classList.add('light')
        document.body.removeAttribute('arco-theme') // 字节切换深色模式
      }
      setSvgColor() // 更改所有的 svg 组件颜色
      isFirstUse.value = false
    }

    return { change, set, isDark, isFirstUse }
  },
  {
    persist: true // 持久化
  }
)
